import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Col,
  Row,
  Form,
  Card,
  Divider,
  Table,
  Button,
  Select,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './List.less';

const FormItem = Form.Item;
const { Option } = Select;
@connect(({ global:{ politicalList,shoolsizeList },pagetest, loading }) => ({
  politicalList,
  shoolsizeList,
  pagetest,
  loading: loading.models.pagetest,
}))
@Form.create()
export default class List extends PureComponent {
  state = {

  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'pagetest/fetch',
    });
  }

  handleUpdate = () => {

  };

  handleDelete = () => {

  };

  handleFormReset = () => {

  };

  handleSearch = () => {

  };

  renderSearchForm() {
    const { politicalList,shoolsizeList } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={10} sm={24}>
            <FormItem label="（从全局获取）政治面貌">
              {getFieldDecorator('political')(
                <Select placeholder="请输入" style={{ width: '100%' }}>
                  { politicalList &&
                    politicalList.map((item) => {
                      return (
                        <Option value={item.value} key={item.value}>{item.label}</Option>
                      )
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={10} sm={24}>
            <FormItem label="（从全局获取）学校规模">
              {getFieldDecorator('shoolsize')(
                <Select placeholder="请输入" style={{ width: '100%' }}>
                  { shoolsizeList &&
                  shoolsizeList.map((item) => {
                    return (
                      <Option value={item.value} key={item.value}>{item.label}</Option>
                    )
                  })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { pagetest: { list } } = this.props;
    const columns = [
      {
        title: '姓名',
        key: 'name',
        dataIndex: 'name',
      },
      {
        title: '性别',
        key: 'sex',
        dataIndex: 'sex',
        render: val => <span>{val === 0?'男':'女'}</span>,
      },
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
      },
      {
        title: '联系方式',
        key: 'tel',
        dataIndex: 'tel',
      },
      {
        title: '邮箱',
        key: 'email',
        dataIndex: 'email',
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '操作',
        render: () => (
          <Fragment>
            <a onClick={this.handleUpdate}>修改</a>
            <Divider type="vertical" />
            <a onClick={this.handleDelete}>删除</a>
          </Fragment>
        ),
      },
    ];

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
          <div className={styles.tableListOperator}>
            <Button icon="plus" type="primary">
              新建
            </Button>
          </div>
          <Table
            dataSource={list}
            columns={columns}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
